<template>
  <div class="menu">
    <div class="logoBox">
      <img src="@/assets/images/logo.jpg" alt="logo" />
    </div>


    <el-menu text-color="#c0c4cc" active-text-color="#fff" :default-active="$route.path" :router="true">
      <template v-for="menu in _menuStore.menus" :key="menu.supplierPageId">
        <el-menu-item v-if="menu.pages.length === 1 && menu.parentId === '0'" :index="menu.pages[0].pageUrl">
          <span>{{ menu.pageName }}</span>
        </el-menu-item>
        <el-sub-menu v-else :index="menu.supplierPageId">
          <template #title>
            <span>{{ menu.pageName }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="second in menu.pages" :key="second.supplierPageId" :index="second.pageUrl">
              <span>{{ second.pageName }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { menuStore } from '@/store/menu'

const _menuStore = menuStore()

const route = useRoute()
</script>
<style scoped lang="scss">
.menu {
  width: 160px;
  height: 100%;
  overflow-y: auto;
  background-color: #333a4b;

  .el-menu {
    border-right: none;

    :deep(.el-menu-item.is-active) {
      border-left: 3px solid #0486fe;
      background-color: #263246;
    }

    :deep(.el-sub-menu__title),
    :deep(.el-menu-item) {
      background-color: #333a4b;
    }

    :deep(.el-sub-menu__title),
    :deep(.el-menu-item) {
      line-height: 44px;
      font-size: 16px;
      height: 44px;
      font-weight: 500;

      .el-sub-menu__icon-arrow {
        transform: rotate(-90deg) !important;
      }
    }

    :deep(.el-menu-item-group) {
      .el-menu-item {
        height: 34px;
        line-height: 34px;
        padding: 0 40px;
        min-width: 160px;
        font-size: 14px;
        font-weight: 400;
      }

      .el-menu-item-group__title {
        padding: 0 !important;
      }
    }

    :deep(.el-menu-item):hover,
    :deep(.el-sub-menu__title):hover {
      background-color: #475060;
    }
  }
}

.logoBox {
  height: 65px;
  text-align: center;
  vertical-align: middle;
}
.logoBox > img {
  max-height: 65px;
}
</style>
